<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;list-style: none;}
        .header ,.footer{
            width: 100%;
            margin: 0 auto;
            background-color: skyblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            height: 100px;
            color: #fff;
        }
        .pagenation{
            width: 100%;margin: 10px auto;
            height: 50px;display: flex;align-items: center;
        }
        .pagenation>.prev,.pagenation>.next{
            width: 50px;
            height: 50px;
            background-color: orange;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            color: #fff;
        }   
        .pagenation>.disable{
            background-color: #ccc;
            cursor: not-allowed;
        }
        .pagenation >.total{
            font-size: 30px;
            font-weight: bold;
            margin: 0 20px;
        }
        .pagenation >select{
            font-size: 24px;
            padding-left: 20px;
            margin-left: 20px;
        }
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 0 auto;
            padding-top: 10px;
        }
        li{
            width: 300px;border: 1px solid #333;
            padding: 5px;box-sizing: border-box;
            margin-bottom: 10px;
        }
        li>img{
            width: 280px;
            display: block;
        }
    </style>
</head>
<body>
    <!-- 分析:
    一.打开页面的时候
    1,从数组内截取部分数据,渲染在页面之上(slice)
    2,调整总页数
        a.根据当前是第几页调整斜线左边的内容
        b.根据总条数的和一页是多少条,填写斜线右边的内容
    3.调整上一页的内容
        a.如果是第一页,就有disabled禁用,还有prev类名上一页
        b.如果不是第一页,就有prev类名
    4.调整下一页内容
        a.如果是最后一页,就有disabled禁用,还有next类名
        b.如果不是最后一页,有next类名
    5.调整下拉框的内容
        a.根据当前一页多少条来决定的这个值

    二.点击下一页
    当前页++
    1,从数组内截取部分数据,渲染在页面之上(slice)
    2,调整总页数
        a.根据当前是第几页调整斜线左边的内容
        b.根据总条数的和一页是多少条,填写斜线右边的内容
    3.调整上一页的内容
        a.如果是第一页,就有disabled禁用,还有prev类名上一页
        b.如果不是第一页,就有prev类名
    4.调整下一页内容
        a.如果是最后一页,就有disabled禁用,还有next类名
        b.如果不是最后一页,有next类名
    5.调整下拉框的内容
        a.根据当前一页多少条来决定的这个值

    三,点击上一页
    当前页--
    1,从数组内截取部分数据,渲染在页面之上(slice)
    2,调整总页数
        a.根据当前是第几页调整斜线左边的内容
        b.根据总条数的和一页是多少条,填写斜线右边的内容
    3.调整上一页的内容
        a.如果是第一页,就有disabled禁用,还有prev类名上一页
        b.如果不是第一页,就有prev类名
    4.调整下一页内容
        a.如果是最后一页,就有disabled禁用,还有next类名
        b.如果不是最后一页,有next类名
    5.调整下拉框的内容
        a.根据当前一页多少条来决定的这个值

    四.切换下拉框的值
    修改一页显示多少条
    1,从数组内截取部分数据,渲染在页面之上(slice)
    2,调整总页数
        a.根据当前是第几页调整斜线左边的内容
        b.根据总条数的和一页是多少条,填写斜线右边的内容
    3.调整上一页的内容
        a.如果是第一页,就有disabled禁用,还有prev类名上一页
        b.如果不是第一页,就有prev类名
    4.调整下一页内容
        a.如果是最后一页,就有disabled禁用,还有next类名
        b.如果不是最后一页,有next类名
    5.调整下拉框的内容
        a.根据当前一页多少条来决定的这个值


    书写的过程:
    函数:
    1,从数组内截取部分数据,渲染在页面之上(slice)
    2,调整总页数
        a.根据当前是第几页调整斜线左边的内容
        b.根据总条数的和一页是多少条,填写斜线右边的内容
    3.调整上一页的内容
        a.如果是第一页,就有disabled禁用,还有prev类名上一页
        b.如果不是第一页,就有prev类名
    4.调整下一页内容
        a.如果是最后一页,就有disabled禁用,还有next类名
        b.如果不是最后一页,有next类名
    5.调整下拉框的内容
        a.根据当前一页多少条来决定的这个值

    打开页面--调用函数
    点击下一页 当前页++   ---调用函数
    点击上一页 当前页--   ---调用函数
    点击下拉框 调整页面   ---调用函数

    数据分析:
    一共多少条 list.length(总条数)
    list是数组
    当前是第一页
    一页多少条 4条
    一共多少页 (向上取整 总条数/一页多少条)

    调整页面相关信息:
    页面展示 1/总页数
    点击下一页  2/总页数
    点击上一页 1/总页数
    切换一页显示多少钱  1/总页数 -->
    
    <div class="header">头部</div>
        <div class="pagenation">
            <span class="prev disable">&lt</span>
            <span class="total">1 / 100</span>
            <span class="next">&gt</span>
            <select>
                <option value="4">4</option>
                <option value="8">8</option>
                <option value="12">12</option>
                <option value="16">16</option>
            </select>
        </div>
        <ul>

        </ul>
    <div class="footer">底部</div>
    <script src="./dm_list.js"></script>

    <script>
        // 准备变量
        var pageSize=4; //一页多少条 4条
        var current=1; //当前是第几页 4条
        var total=0;  //一共多少页

        // 准备一个函数
        // 1.从数组内截取部分数据,渲染在页面之上(slice)
        // 假设:当前是第1页 一页4条 [0]-[3]
        // 假设:当前是第2页 一页4条 [4]-[7]
        // 假设:当前是第3页 一页4条 [8]-[11]

        // 假设:当前是第1页 一页8条 [0]-[7]
        // 假设:当前是第2页 一页8条 [8]-[15]
        
        // 假设:当前页面是current页,一页pageSize条
        // [(current-1)*pageSize]  至  [current*pageSize-1]

        // 注意 :slice方法截取,包前不包后
        // slice((curent-1)*pageSize,current*pageSize)

        

        // 1.获取元素
        var contentBox=document.querySelector('ul');//获取内容
        var totalBox=document.querySelector('.total');//获取统计d
        var prevBtn=document.querySelector('.prev');//获取上一个按钮
        var nextBtn=document.querySelector('.next');//获取下一个按钮
        var selectBox=document.querySelector('select');//获取下拉框

        // console.log(list);
        function bindHtml(){
            var bindList=list.slice((current-1)*pageSize,current*pageSize)
            // console.log(bindList);//4条
            contentBox.innerHTML=bindList.reduce(function(prev,item){
                return prev+`
                <li>
                    <img src=${item.pic} alt="">
                    <p>名称:${item.name} </p>
                    <p>城市:${item.city} </p>
                    <p>地址:${item.address} </p>
                    <p>时间:${item.showTime} </p>
                    <p>价格:${item.price} </p>
                </li>
                `
            },"")

        // 2.调整页面相关信息
        // 总页数
        total=Math.ceil(list.length/pageSize) //返回值是取整之后的数值
        // 通过获取到的元素,放到指定的 <span class="total">1 / 100</span>
        totalBox.innerText=`${current}/ ${total}`

        // 3.上一页
        prevBtn.className=current ===1 ? 'prev disable':'prev';
        // 4.下一页
        nextBtn.className=current ===total ? 'next disable':'next';

        // 5.select
        selectBox.value=pageSize
    }


        // 2,打开页面的直接调用函数,渲染页面
        bindHtml()

        // 3.点击下一页
        nextBtn.onclick=function(){
            // 判断当前页是否是最后一页
            if(current==total) return
            //改变当前页
            current++
            //重新渲染页面
            bindHtml()
        }

        // 4.点击上一页 
        prevBtn.onclick=function(){
            // 判断当前页是否是第一一页
            if(current==1) return
            //改变当前页
            current--
            //重新渲染页面
            bindHtml()
        }

        // 5.selet框
        // onchange时间,下拉框的改变事件
        selectBox.onchange=function(){
            // console.log(1);
            // 拿到下拉框选择的内容,赋值给pageSize
             pageSize= selectBox.value
             current=1// 让页面回到第一页
             bindHtml()
        }

    </script>

</body>
</html>